<template>
	<div class="password-change">
		<right-nav :parentName='"账号管理"' :childName='"修改密码"'></right-nav>
		<div class="right-box">
			<el-form :model='psdInfo' :rules='psdRules' ref='psdInfo' label-width='140px'>
				<el-row>
					<el-col :span='10' class='psd-col'>
						<el-form-item label='请输入旧密码：' prop='oldPsd' size='small'>
							<el-input v-model=psdInfo.oldPsd show-password></el-input>
						</el-form-item>
					</el-col>
					<div class="psd-tip mr350">长度要在6~16字符之间并且必须包含数字和字母</div>
					<el-col :span='10' class='psd-col'>
						<el-form-item label='请输入新密码：' prop='newPsd' size='small'>
							<el-input v-model=psdInfo.newPsd show-password></el-input>
						</el-form-item>
					</el-col>
					<div class="psd-tip mr316">如忘记旧密码，可通过登录页，忘记密码功能重置密码</div>
					<el-col :span='10' class='psd-col'>
						<el-form-item label='确认新密码：' prop='confimPsd' size='small'>
							<el-input v-model=psdInfo.confimPsd show-password></el-input>
						</el-form-item>
					</el-col>
					<div class="psd-tip mr350">长度要在6~16字符之间并且必须包含数字和字母</div>
					<el-col :span='10' class='text-center'>
						<el-button @click='sumit'>提交</el-button>
					</el-col>
				</el-row>
			</el-form>
		</div>
	</div>
</template>

<script>
	import RightNav from '@/components/right-nav'
	export default {
		components: {
			RightNav
		},

		data() {
			let comfirmNew = (rule, value, callback) => {
				if(!value) {
					callback('请输入新密码！')
				} else {
					if(this.psdInfo.oldPsd == value) {
						callback(new Error('新密码不能与旧密码一致，请修改'))
					} else {
						callback();
					}
				}
			};
			let comfirm = (rule, value, callback) => {
				if(!value) {
					callback('请再次输入新密码！')
				} else {
					if(this.psdInfo.newPsd !== value) {
						callback(new Error('新密码输入不一致'))
					} else {
						callback();
					}
				}
			}

			return {
				psdInfo: {
					oldPsd: '',
					newPsd: '',
					confimPsd: '',
				},
				defaultInfo: '',
				
				
				psdRules: {
					oldPsd: [{
						required: true,
						message: '请输入旧密码',
						trigger: 'blur'
					}],
					newPsd: [{
						required: true,
						trigger: 'blur',
						validator: comfirmNew,
					}],
					confimPsd: [{
						required: true,
						trigger: 'blur',
						validator: comfirm,
					}]
				}
			}
		},
		created() {
			this.defaultInfo = JSON.parse(JSON.stringify(this.psdInfo));
			
			this.$bus.emit('activeEvent', 'psdChange');
		},
		methods: {
			sumit: function(){
				this.$refs.psdInfo.validate((valid) => {
					if(valid){
						this.$post(this.$apiUrl.userCenter.changePassword,{
							newPassword: this.psdInfo.newPsd,
							oldPassword: this.psdInfo.oldPsd,
						}).then((res) => {
							this.$message.success('密码修改成功');
							this.psdInfo = JSON.parse(JSON.stringify(this.defaultInfo));
						})
					}
				})
			}
		}
	}
</script>

<style scoped="scoped" lang="less">
	.password-change {
		.right-box {
			padding: 18px;
			border: 1px solid rgb(221, 221, 221);
		}
		.psd-col{
			float: none;
			display: inline-block;
		}
		.psd-tip{
			float: right;
		    line-height: 34px;
		}
		.mr316{
			margin-right: 316px;
		}
		.mr350{
			margin-right: 350px;
		}
	}
</style>